<template>
  <je-modal
    v-model:visible="visibleModule"
    width="460px"
    :title="$t('leftTree.copy')"
    height="auto"
    :resize="false"
    :maximizable="false"
    :ok-button="addModule"
    cancel-button
    @close="cancelModal"
  >
    <je-form layout="vertical" :model="modelRef">
      <je-form-item label-align="top" :label="$t('copyModal.tableInfoLabel')" name="COPYTABLE_INFO">
        <je-input v-model:value="modelRef.COPYTABLE_INFO" disabled="true" />
      </je-form-item>
      <je-form-item
        label-align="top"
        :label="$t('copyModal.newTableNameLabel')"
        name="newTableName"
        v-bind="validateInfos.newTableName"
      >
        <je-input v-model:value="modelRef.newTableName" />
      </je-form-item>
      <je-form-item
        label-align="top"
        :label="$t('copyModal.newTableCodeLabel')"
        name="newTableCode"
        v-bind="validateInfos.newTableCode"
      >
        <je-input v-model:value="modelRef.newTableCode" />
      </je-form-item>
      <je-form-item
        label-align="top"
        :label="$t('copyModal.moduleLabel')"
        name="SY_PARENT"
        v-bind="validateInfos.SY_PARENT"
      >
        <je-tree-select
          v-model:value="modelRef.SY_PARENT"
          :select-options="{ title: '选择模块' }"
          name="SY_PARENT"
          config-info="JE_CORE_RESOURCETABLE,SY_PARENT~SY_PARENT_ID,text~id,S"
          :querys="getJQuery()"
          :orders="[{ code: 'SY_ORDERINDEX', type: 'ASC' }]"
        />
      </je-form-item>
      <je-form-item label-align="top" name="useNewName">
        <template #label>
          <i class="conditionicon fas fa-question-circle" @click="clickIcon" />
          {{ $t('copyModal.typeLabel') }}
        </template>
        <je-radio-group v-model:value="modelRef.useNewName" name="useNewName">
          <je-radio value="1">{{ $t('copyModal.radioValueUse') }}</je-radio>
          <je-radio value="0">{{ $t('copyModal.radioValueNonuse') }}</je-radio>
        </je-radio-group>
      </je-form-item>
    </je-form>
  </je-modal>

  <je-modal
    v-model:visible="visibleCondition"
    width="700px"
    title="是否使用新表前缀"
    height="auto"
    :resize="false"
    ok-button
    button-align="right"
    :maximizable="false"
  >
    <div>
      此选项是选择新资源表生成列编码的规则。选择使用新表前缀，则资源表列编码根据新表编码尾缀进行生成。若不使用新表前缀，则按原资源表的列编码进行生成。
    </div>
  </je-modal>
</template>
<script>
  import { defineComponent, watch, ref, onMounted, reactive, toRaw } from 'vue';
  import { Input, Modal, Radio, Form, InputSelect } from '@jecloud/ui';
  import { copyTable } from '../../../api/index';
  import { verifyData } from '../../../helper/common';

  const useForm = Form.useForm;
  export default defineComponent({
    name: 'ModalCopy',
    components: {
      JeModal: Modal,
      JeForm: Form,
      JeFormItem: Form.Item,
      JeInput: Input,
      JeRadio: Radio,
      JeRadioGroup: Radio.Group,
      JeTreeSelect: InputSelect.Tree,
    },
    props: {
      modalShow: {
        type: Boolean,
        default: false,
      },
      modalData: {
        type: Object,
        default: () => {
          return {};
        },
      },
      productData: {
        type: Object,
        default: () => {
          return {};
        },
      },
    },
    emits: ['changeData'],
    setup(props, { emit }) {
      //保存模块数据，关闭弹窗
      console.log(props.modalData);
      const visibleModule = ref(props.modalShow);
      const modalData = ref(props.modalData);
      const modelRef = reactive({
        COPYTABLE_INFO: modalData.value.text + '（' + modalData.value.code + '）',
        newTableName: modalData.value.text + '_COPY',
        newTableCode: modalData.value.code + '_COPY',
        COPYTABLE_MODULE_NAME: modalData.value.parentText,
        SY_PARENT: '',
        SY_PARENT_ID: '',
        useNewName: '1',
      });
      const cancelModal = () => {
        visibleModule.value = false;
        emit('changeData', 'cancel');
      };
      const rulesRef = reactive({
        newTableName: verifyData.name,
        newTableCode: verifyData.code,
        SY_PARENT: [verifyData.required],
      });
      const { resetFields, validate, validateInfos } = useForm(modelRef, rulesRef, {
        onValidate: (...args) => {},
      });
      const addModule = ({ $modal, button }) => {
        const modal = $modal,
          btn = button;
        btn.loading = true;
        //保存数据逻辑
        validate()
          .then(() => {
            const params = {
              tableCode: 'JE_CORE_RESOURCETABLE',
              fromTableId: modalData.value.id,
              RESOURCETABLE_TABLECODE: modelRef.newTableCode.trim(),
              RESOURCETABLE_TABLENAME: modelRef.newTableName.trim(),
              SY_PARENT: modelRef.SY_PARENT_ID,
              isUseNewName: modelRef.useNewName,
            };

            copyTable(params)
              .then((obj) => {
                btn.loading = false;
                modal.close();
                Modal.notice(obj.message, 'success');
                emit('changeData', 'add');
              })
              .catch((e) => {
                btn.loading = false;
                Modal.alert(e.message, 'error');
              });
          })
          .catch((error) => {
            btn.loading = false;
            //console.log('error', error);
          });
        return false;
      };

      //封装j_query
      const getJQuery = () => {
        const j_query = [
          {
            code: 'RESOURCETABLE_TYPE',
            type: '=',
            value: 'MODULE',
          },
          {
            code: 'SY_PRODUCT_ID',
            type: '=',
            value: props.productData.productId,
          },
        ];

        return j_query;
      };

      //点击icon
      const visibleCondition = ref(false);
      const clickIcon = () => {
        visibleCondition.value = true;
      };
      return {
        validateInfos,
        resetFields,
        modelRef,
        cancelModal,
        visibleModule,
        addModule,
        getJQuery,
        visibleCondition,
        clickIcon,
      };
    },
  });
</script>
<style lang="less" scoped>
  .conditionicon {
    color: #ebebeb;
    cursor: pointer;
    margin-right: 5px;
    &:hover {
      color: #3265f5;
    }
  }
</style>
